<div class="table-content" *ngIf="csvData.length>0">
    <d-button bsStyle="primary" class="my-glob-padding-right" [showLoading]="btnShowLoading"
        (btnClick)="putCsvFile()">保存</d-button>
    <d-button bsStyle="common" class="my-glob-padding-right" (btnClick)="exportCsvFile()">导出</d-button>
    <d-toggle dTooltip [(ngModel)]="isAutoSave" (change)="onChageAutoSave($event)" [content]="'帮助.表格.自动' | translate"
        [color]="'#FECC55'"></d-toggle>
    <d-data-table style="margin-top: 8px;" [borderType]="'bordered'" [dataSource]="csvFilterList" [size]="'md'"
        [fixHeader]="true" [scrollable]="true" dLoading [loading]="loadingTip" [backdrop]="true"
        [loadingStyle]="'infinity'" tableHeight="100%" [virtualMinBufferPx]="10" [virtualMaxBufferPx]="20"
        [tableOverflowType]="'overlay'">
        <thead dTableHead>
            <tr dTableRow>
                <th dHeadCell>索引</th>
                <th dHeadCell [sortable]="true" [showSortIcon]="false" (sortChange)="onSortChange($event, 0)"
                    [filterList]="ordinalFilterList" [filterable]="true" [filterMultiple]="true"
                    [filterBoxWidth]="'200px'" (filterChange)="filterChangeMutil($event,0)">{{ csvHeader[0] }}</th>
                <th dHeadCell [filterList]="imgNameFilterList" [filterable]="true" [filterMultiple]="true"
                    [filterBoxWidth]="'200px'" (filterChange)="filterChangeMutil($event,1)">{{ csvHeader[1] }}</th>
                <th dHeadCell>{{ csvHeader[2] }}</th>
                <th dHeadCell>{{ csvHeader[3] }}</th>
                <th dHeadCell>{{ csvHeader[4] }}</th>
                <th dHeadCell>{{ csvHeader[5] }}</th>
                <th dHeadCell>{{ csvHeader[6] }}</th>
                <th dHeadCell>操作</th>
            </tr>
        </thead>
        <tbody dTableBody>
            <ng-template let-rowItem="rowItem" let-rowIndex="rowIndex">
                <tr dTableRow>
                    <td dTableCell [rowItem]="rowItem" [field]="'index'">
                        <span>{{ rowIndex + 1 }}</span>
                    </td>
                    <td dTableCell [rowItem]="rowItem" [field]="csvHeader[0]">
                        <span>{{ rowItem[0] }}</span>
                    </td>

                    <td dTableCell [editable]="false" [field]="csvHeader[1]" [rowItem]="rowItem">
                        <span>
                            <d-button bsStyle="text" (btnClick)="openImage(rowItem[1],rowItem[2])"> {{ rowItem[1]
                                }}</d-button>
                        </span>
                    </td>

                    <td dTableCell [editable]="true" [editableTip]="editableTip"
                        [(editing)]="rowItem[csvHeader[2]+'Edit']" [beforeEditEnd]="beforeEditEnd"
                        [field]="csvHeader[2]" [rowItem]="rowItem">
                        <span *ngIf="!rowItem[csvHeader[2]+'Edit']">
                            {{ rowItem[2] }}
                        </span>
                        <div *ngIf="rowItem[csvHeader[2]+'Edit']" class="edit-padding-fix">
                            <d-input-number [dAutoFocus]="true" [min]="1" [name]="csvHeader[2]"
                                [(ngModel)]="rowItem[2]"></d-input-number>
                        </div>
                    </td>

                    <td dTableCell [editable]="true" [editableTip]="editableTip"
                        [(editing)]="rowItem[csvHeader[3]+'Edit']" [beforeEditEnd]="beforeEditEnd"
                        [field]="csvHeader[3]" [rowItem]="rowItem">
                        <span *ngIf="!rowItem[csvHeader[3]+'Edit']">
                            {{ rowItem[3] }}
                        </span>
                        <div *ngIf="rowItem[csvHeader[3]+'Edit']" class="edit-padding-fix">
                            <input [dAutoFocus]="true" class="devui-form-control" [name]="csvHeader[3]"
                                [(ngModel)]="rowItem[3]" [attr.minlength]="1" />
                        </div>
                    </td>

                    <td dTableCell [editable]="true" [editableTip]="editableTip"
                        [(editing)]="rowItem[csvHeader[4]+'Edit']" [beforeEditEnd]="beforeEditEnd"
                        [field]="csvHeader[4]" [rowItem]="rowItem">
                        <span *ngIf="!rowItem[csvHeader[4]+'Edit']">
                            {{ rowItem[4] }}
                        </span>
                        <div *ngIf="rowItem[csvHeader[4]+'Edit']" class="edit-padding-fix">
                            <d-input-number [dAutoFocus]="true" [min]="0" [name]="csvHeader[4]"
                                [(ngModel)]="rowItem[4]"></d-input-number>
                        </div>
                    </td>

                    <td dTableCell [editable]="true" [editableTip]="editableTip"
                        [(editing)]="rowItem[csvHeader[5]+'Edit']" [beforeEditEnd]="beforeEditEnd"
                        [field]="csvHeader[5]" [rowItem]="rowItem">
                        <span *ngIf="!rowItem[csvHeader[5]+'Edit']">
                            {{ rowItem[5] }}
                        </span>
                        <div *ngIf="rowItem[csvHeader[5]+'Edit']" class="edit-padding-fix">
                            <d-input-number [dAutoFocus]="true" [max]="1.0" [min]="0.0" [step]="0.1"
                                [name]="csvHeader[5]" [(ngModel)]="rowItem[5]"></d-input-number>
                        </div>
                    </td>

                    <td dTableCell [editable]="true" [editableTip]="editableTip"
                        [(editing)]="rowItem[csvHeader[6]+'Edit']" [beforeEditEnd]="beforeEditEnd"
                        [field]="csvHeader[6]" [rowItem]="rowItem">
                        <span *ngIf="!rowItem[csvHeader[6]+'Edit']">
                            {{ rowItem[6] }}
                        </span>
                        <div *ngIf="rowItem[csvHeader[6]+'Edit']" class="edit-padding-fix">
                            <d-input-number [dAutoFocus]="true" [max]="1" [min]="0.0" [name]="csvHeader[6]"
                                [(ngModel)]="rowItem[6]"></d-input-number>
                        </div>
                    </td>

                    <td dTableCell>
                        <d-button bsStyle="text" (btnClick)="deleteData(rowIndex)">删除</d-button>
                    </td>
                </tr>
            </ng-template>
        </tbody>
    </d-data-table>
    <!-- 图片预览，默认不显示，等到按钮触发才显示 -->
    <div dImagePreview [customSub]="customImageSub" [disableDefault]="true" style="display: none;">
        <img *ngFor="let item of imgSrcList" [attr.src]="item" style="max-width: 800px" />
    </div>
</div>